<template>
  <div class="body">
    <!-- 顶部 -->
    <nav class="nav">
      <span class="back" @click="$router.go(-1)">&lt;</span> 租房管理
    </nav>

    <!-- 渲染列表 -->
    <div v-if="rentList.length">
      <HouseItem
        v-for="item in rentList"
        :key="item.houseCode"
        :item="item"
      ></HouseItem>
    </div>

    <!-- 没有数据时 -->
    <div v-else>
      <p class="text">
        没有呀，快
        <router-link to="/torent" class="jump">去发布房源</router-link> 吧～
      </p>
    </div>
  </div>
</template>

<script>
import { pushHouseList } from '@/api/user'
import HouseItem from '@/components/HouseItem.vue'

export default {
  name: 'RentList',
  components: {
    HouseItem
  },
  data () {
    return {
      rentList: []
    }
  },
  async created () {
    const res = await pushHouseList()
    this.rentList = res.body
    // console.log(this.collectList)
  },
  methods: {}
}
</script>

<style scoped lang="less">
.nav {
  height: 44px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 44px;
  text-align: center;
  background: #4fc08d;
  color: #fff;
  .back {
    font-size: 18px;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 0;
    transform: scale(1, 1.5);
  }
}
.text {
  // font-size: 16px;
  color: #b7b5b5;
  margin: 90px;
  .jump {
    color: #63bb8b;
  }
}
</style>
